import Typography from '@/pages/OrderModule/common/components/Typography';
import { formatTime } from '@/pages/OrderModule/common/utils/time.js';
import { flag, labelTypeMap, labelColorMap } from '@/utils/config';
import IconFont from '@/components/IconFont';
import Style from './index.module.less';


const handlePayOrderClick = (val, navigate) => {
	console.log(val, 'val')
	navigate(`/account/balance?payOrder=${val}`);
}

const renderPayOrder = (str, navigate) => {
	let str1 = str.match(/<html>.{1,}<\/html>/);
	const elArr = [];
	if (str1) {
		//目标字符串的开头下标
		const index = str1['index'];

		//获取目标字符串
		const str2 = str1[0];

		//获取目标单号,因为可能存在多个单号

		const payOrderArr = str2.replace(/<\/{0,1}html>/g, '').split(',');


		//目标字符串的结尾下标
		const index1 = index + str2.length;

		//目标字符串前面的字符串
		let newStr1 = str.slice(0, index);

		//目标字符串后面的字符串，需要使用递归继续判断是否存在目标字符串
		let newStr2 = str.slice(index1, str.length);

		//先判断是否有旗帜渲染
		if (newStr1.indexOf('修改旗帜为:') > -1 || newStr1.indexOf('平台同步旗帜为:') > -1) {
			const index1 = newStr1.indexOf('修改旗帜为:');
			const index2 = newStr1.indexOf('平台同步旗帜为:');
			let index;
			if (index1 > -1) {
				index = index1 + 6;
			} else if (index2 > -1) {
				index = index2 + 8;
			} else {
				index = '';
			}
			const startStr = newStr1.substring(0, index);
			const endStr = newStr1.substring(index + 1);
			const flags = newStr1[index] == 0 ? '无旗帜' : <IconFont type={flag[newStr1[index]]} style={{ fontSize: 14 }} />;
			elArr.push(startStr);
			elArr.push(flags);
			elArr.push(endStr);
		} else {
			elArr.push(newStr1);
		}

		//把获取的目标单号和字符串丢进缓存区，准备渲染
		payOrderArr.map((v, index) => {
			if (index == payOrderArr.length - 1) {
				if (newStr2) {
					if (newStr2 == '）') {
						elArr.push(<span className="common-color2" onClick={() => handlePayOrderClick(v, navigate)}>{v}</span>);
					} else {
						elArr.push(<span className="common-color2" onClick={() => handlePayOrderClick(v, navigate)}>{v}，</span>);
					}
				} else {
					elArr.push(<span className="common-color2" onClick={() => handlePayOrderClick(v, navigate)}>{v}</span>);
				}
			} else {
				elArr.push(<span className="common-color2" onClick={() => handlePayOrderClick(v, navigate)}>{v}，</span>);
			}
		})
		//先判断是否有旗帜渲染
		if (newStr2.indexOf('修改旗帜为:') > -1 || newStr2.indexOf('平台同步旗帜为:') > -1) {
			const index1 = newStr2.indexOf('修改旗帜为:');
			const index2 = newStr2.indexOf('平台同步旗帜为:');
			let index;
			if (index1 > -1) {
				index = index1 + 6;
			} else if (index2 > -1) {
				index = index2 + 8;
			} else {
				index = '';
			}
			// const index2 = (newStr2.split(':')[0] + ':').length; // 旗帜的未知
			const startStr = newStr2.substring(0, index);
			const endStr = newStr2.substring(index + 1);
			const flags = newStr2[index] == 0 ? '无旗帜' : <IconFont type={flag[newStr2[index]]} style={{ fontSize: 14 }} />;
			elArr.push(startStr);
			elArr.push(flags);
			elArr.push(endStr);
		} else {
			elArr.push(newStr2);
		}
		let el = <>
			{
				elArr.map((v, index) => (
					<span key={index}>{v}</span>
				))
			}
		</>;
		return (
			el
		)
	} else {
		if (str.indexOf('修改旗帜为:') > -1 || str.indexOf('平台同步旗帜为:') > -1) {
			const index1 = str.indexOf('修改旗帜为:');
			const index2 = str.indexOf('平台同步旗帜为:');
			let index;
			if (index1 > -1) {
				index = index1 + 6;
			} else if (index2 > -1) {
				index = index2 + 8;
			} else {
				index = '';
			}
			const startStr = str.substring(0, index);
			const endStr = str.substring(index + 1);
			const flags = str[index] == 0 ? '无旗帜' : <IconFont type={flag[str[index]]} style={{ fontSize: 14 }} />;
			return (
				<>
					{startStr}
					{flags}
					{endStr}
				</>
			);
		}
		return str;
	}
}

export function useOrderLogColumns(navigate) {
	const orderLogColumns = [
		{
			title: '操作人账号',
			dataIndex: 'userAccount',
			width: 150,
			render(value, record) {
				return (
					<Typography className={Style.pointer} as="s1">
						{value}
					</Typography>
				);
			},
		},
		{
			title: '操作界面',
			dataIndex: 'operationPage',
			width: 120,
			render(value, record) {
				return (
					<Typography className={Style.pointer} as="s1">
						{value}
					</Typography>
				);
			},
		},
		{
			title: '操作类型',
			dataIndex: 'operationType',
			width: 120,
			render(value, record) {
				return (
					<Typography className={Style.pointer} as="s1">
						{value}
					</Typography>
				);
			},
		},
		{
			title: '操作事件',
			dataIndex: 'eventContent',
			render(value, record) {
				return (
					<Typography className={Style.pointer} as="s1">
						<div>{renderPayOrder(value, navigate)}</div>
					</Typography>
				);
			},
		},
		{
			title: '操作时间',
			dataIndex: 'operationTime',
			width: 200,
			render(value, record) {
				return (
					<Typography className={Style.pointer} as="s1">
						{formatTime(value * 1000)}
					</Typography>
				);
			},
		},
	];

	return {
		orderLogColumns,
	};
}
